<template>
  <div class="detailView">
    <loading-comp v-if="isShow"></loading-comp>
    <div v-show="look">
      <!-- 海报 -->
      <div class="poster" v-if="!isShow">
        <span @click="returnUp"></span>
        <img :src="msg.horizontal_cover" />
      </div>
      <!-- 漫画详情 -->
      <div class="detail" v-if="!isShow">
        <!-- 收藏按钮 -->
        <div class="collect" :class="{ active: isActive }" @click="collect">
          <div>
            <img src="@/assets/收藏.png" />
          </div>
          <span>{{ isActive ? "已追" : "追漫" }}</span>
        </div>
        <h3>{{ msg.title }}</h3>
        <p class="state">
          {{ msg.is_finish ? "已完结" : "连载中" }}
          <span>{{
            msg.renewal_time == "已完结" ? "" : msg.renewal_time
          }}</span>
        </p>
        <p class="author" v-if="msg.author_name">
          <span>作者：</span>{{ msg.author_name }}·{{ msg.styles }} | 已更新{{
            msg.total
          }}话
        </p>
        <div class="introduce">
          <div class="introduce-left">简介：</div>
          <div class="introduce-right">{{ msg.classic_lines }}</div>
        </div>
      </div>
      <!-- 漫画选集 -->
      <div class="num" v-if="!isShow">
        <h5>漫画列表</h5>
        <ul :style="`height: ${hight}vw;`">
          <li v-for="(item, index) in epid" :key="index">
            <router-link :to="`/detail/look?id=${item}&num=${index}`">{{
              index + 1
            }}</router-link>
          </li>
        </ul>
        <div class="more" @click="high" v-if="!isShow" v-show="dian">
          ......
        </div>
      </div>
      <!-- 漫画推荐 -->
      <div class="recommend" v-if="!isShow">
        <p>更多推荐</p>
        <cartoon-list :recommend="tuijian"></cartoon-list>
      </div>
      <!-- 开始观看 -->
      <div class="look" v-if="!isShow">
        <router-link :to="`/detail/look?id=${epid[0]}&num=0`"
          >开始观看</router-link
        >
      </div>
    </div>
    <router-view :epid="epid"></router-view>
  </div>
</template>

<script>
import { get } from "@/http/request.js";
import LoadingComp from "@/components/LoadingComp.vue";
import CartoonList from "@/components/CartoonList.vue";
import { Toast } from "vant";

export default {
  name: "DetailView",
  data() {
    return {
      msg: {},
      collectComic: [],
      isShow: true,
      isActive: false,
      tuijian: [],
      epid: [],
      hight: 30,
      dian: true,
      look: true,
    };
  },
  props: ["tongbu"],
  components: {
    LoadingComp,
    CartoonList,
  },
  // 监视id变化
  watch: {
    $route: {
      handler(newValue, oldValue) {
        this.isShow = true;
        this.initList();
        this.recommend();
        if (newValue.path == "/detail/look") {
          this.look = false;
        }
        if (newValue.path == "/detail") {
          this.look = true;
        }

        for (let i = 0; i < this.collectComic.length; i++) {
          if (this.collectComic[i].item_id == this.$route.query.id) {
            this.isActive = true;
            return;
          } else {
            this.isActive = false;
          }
        }
      },
      deep: true,
    },
  },

  methods: {
    high() {
      if (Math.ceil((this.epid.length - 10) / 15) > this.hight / 30) {
        this.hight = this.hight + 30;
      } else {
        this.dian = false;
      }
    },
    // 当前漫画详情
    async initList() {
      await get(
        `https://apis.netstart.cn/bcomic/ComicDetail?comicId=${this.$route.query.id}`
      ).then((data) => {
        if (data && data.code === 0) {
          // console.log(data.data);
          // 传值
          this.msg = {
            // id
            item_id: data.data.id,
            //  标题
            title: data.data.title,
            //  完结否
            is_finish: data.data.is_finish,
            //  更新时间
            renewal_time: data.data.renewal_time,
            //  作者
            author_name: data.data.author_name[0],
            //  标签
            styles: data.data.styles[0],
            //  最新话
            total: data.data.total,
            // 简介
            classic_lines: data.data.classic_lines,
            // 大图片
            horizontal_cover: data.data.horizontal_cover,
            // 小图片
            image: data.data.vertical_cover,
            // 更新到第几话
            last_ord: data.data.last_ord,
            // 是否选中
            select: false,
            // 章节id
            ep_list: data.data.ep_list,
          };

          data.data.ep_list.forEach((item) => {
            this.epid.push(item.id);
          });
        }
      });
      this.isShow = false;
    },
    // 当前漫画相关推荐
    async recommend() {
      await get(
        `https://apis.netstart.cn/bcomic/MoreRecommend?comicId=${this.$route.query.id}`
      ).then((data) => {
        if (data && data.code === 0) {
          // console.log(data);
          let arr = data.data.recommend_comics
            .sort(() => Math.random() - 0.5)
            .slice(0, 6);
          let arr2 = [];
          // console.log(arr);
          arr.forEach((item) => {
            arr2.push({
              item_id: item.id,
              title: item.title,
              image: item.vertical_cover,
            });
          });
          // console.log("arr2", arr2);
          this.tuijian = arr2;
        }
      });
      this.isShow = false;
    },
    // 收藏漫画
    collect() {
      if (this.$route.query.isLogin == "true") {
        // 判断开关状态
        if (this.isActive) {
          this.isActive = false;
          if (this.collectComic.length > 0) {
            // 删除取消收藏的数据
            this.collectComic = this.collectComic.filter((item) => {
              return item.item_id != this.$route.query.id;
            });
          }
        } else {
          // 数据没有则添加
          this.isActive = true;
          // 总数据有了则不添加
          for (let i = 0; i < this.collectComic.length; i++) {
            if (this.collectComic[i].item_id !== this.msg.item_id) {
              continue;
            } else {
              return;
            }
          }
          this.collectComic.push(this.msg);
        }
        this.$emit("item-collect", this.collectComic);
      } else {
        Toast("请先登录！");
      }
    },

    // 回退上一个页面
    returnUp() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.initList();
    this.recommend();
    this.$emit("item-ji", 1);
    this.collectComic = this.tongbu;
    if (this.$route.path == "/detail/look") {
      this.look = false;
    }
    // this.collectComic.forEach((item) => {
    //   if (item.item_id == this.$route.query.id) {
    //     this.isActive = true;

    //   } else {
    //     this.isActive = false;
    //   }
    // });
    for (let i = 0; i < this.collectComic.length; i++) {
      if (this.collectComic[i].item_id == this.$route.query.id) {
        this.isActive = true;
        return;
      } else {
        this.isActive = false;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/common/base.scss";
.detailView {
  .poster {
    width: 100%;
    height: 60vw;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }
    span {
      display: inline-block;
      position: absolute;
      top: 2vw;
      left: 0;
      width: 8vw;
      height: 8vw;
      background-color: red;
      background: url("@/assets/左箭头.png") no-repeat center;
      background-size: 100%;
    }
  }
  .num {
    margin-top: 10vw;
    padding: $p;
    position: relative;
    h5 {
      margin: 3vw 0;
    }
    ul {
      // border: 1px solid #000;
      height: 30vw;
      overflow: hidden;
      // display: flex;
      // flex-wrap: wrap;

      li {
        display: inline-block;
        border: 2px solid $bgc;
        width: 19%;
        margin: 1vw 0;
        margin-right: 1%;
        height: 8vw;
        line-height: 8vw;
        text-align: center;
        border-radius: 4vw;
      }
    }
    .more {
      position: absolute;
      bottom: 1vw;
      right: 5vw;
      padding-right: 3vw;
      width: 100%;
      height: 10vw;
      text-align: right;
      background-color: #fff;

      // background-color: red;
      // background: ...;
    }
  }
  .detail {
    padding: $p;
    padding-top: 3vw;
    position: relative;
    .collect {
      position: absolute;
      right: 5vw;
      top: -10vw;
      background-color: $bgc;
      font-size: 3.2vw;
      height: 12vw;
      width: 14vw;
      padding: 0 2vw;
      text-align: center;
      border-top-left-radius: 3vw;
      border-bottom-right-radius: 3vw;
      img {
        width: 60%;
      }
    }
    .active {
      background-color: #aaa;
      color: #fff;
    }
    p {
      margin: 3vw 0;
    }
    .state {
      // font-weight: 600;
      font-size: 3.4667vw;
      span {
        color: #777;
      }
    }
    .author {
      font-size: 3.2vw;
      color: #aaa;
      span {
        display: inline-block;
        width: 40px;
      }
    }
    .introduce {
      width: 100%;
      font-size: 3.2vw;
      color: #aaa;
      position: relative;
      .introduce-left {
        width: 10.6667vw;
        position: absolute;
        top: 0;
        left: 0;
      }
      .introduce-right {
        margin-left: 10.6667vw;
      }
    }
  }
  .recommend {
    margin-top: 10vw;
    p {
      padding: 2vw 4vw;
      font-size: 3.7333vw;
    }
  }
  .look {
    width: 25vw;
    height: 10vw;
    background-color: $bgc;
    line-height: 10vw;
    text-align: center;
    position: fixed;
    border-radius: 5vw;
    bottom: 10vw;
    left: 37%;
    a {
      color: #fff;
    }
  }
}
</style>
